<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery和CSS3制作街头霸王游戏动画|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/demo.css" rel="stylesheet" type="text/css" />
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
		<header class="htmleaf-header">
			<h1>jQuery和CSS3制作街头霸王游戏动画 <span>Build a Street Fighter Demo with CSS Animations and JavaScript</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501251277.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="content bgcolor-8">
			<div class="game-wrap">
				<div class="stage">
				  <div class="ken stance"></div>
				</div>
				<div class="commands htmleaf-demo">
				  	<h3>可以使用键盘或下面的按钮控制Ken</h3>
				  	<div class="htmleaf-control">
				    轻拳: <a  id="a">a</a><br>
				    中腿: <a  id="z">z</a><br>
				    重踢: <a  id="e">e</a><br>
				    </div>
				    
				    <div class="htmleaf-control">
				    回旋踢: <a id="q">q</a><br>
				    冲击波: <a id="s">s</a><br>
				    升龙霸: <a id="d">d</a><br>
					</div>
				    <div class="htmleaf-control">
				    跳跃: &nbsp;&nbsp;&nbsp;<button id="up">▲</button><br>
				    行走: &nbsp;&nbsp;&nbsp;<button id="left">◀</button><button id="right">►</button><br>
				    下蹲: &nbsp;&nbsp;&nbsp;<button id="down">▼</button>
				    </div>
				</div>
			</div>
		</div>
	</div>
	
	<script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
<script>
var $ken = $('.ken');
var $kenPos, $fireballPos;

var punch = function(){
  $ken.addClass('punch'); 
  setTimeout(function() { $ken.removeClass('punch'); }, 150);
};
var kick = function(){
  $ken.addClass('kick');
  setTimeout(function() { $ken.removeClass('kick'); }, 500);
};
var rkick = function(){
  $ken.addClass('reversekick');
  setTimeout(function() { $ken.removeClass('reversekick'); }, 500); 
};
var tatsumaki = function(){
  $ken.addClass('tatsumaki');
  setTimeout(function() { $ken.addClass('down'); }, 1500); 
  setTimeout(function() { $ken.removeClass('tatsumaki down'); }, 2000);
};
var hadoken = function(){
  $ken.addClass('hadoken'); 
  setTimeout(function() { $ken.removeClass('hadoken'); }, 500); 
  setTimeout(function() {
      var $fireball = $('<div/>', { class:'fireball' });
      $fireball.appendTo($ken);
              
      var isFireballColision = function(){ 
          return $fireballPos.left + 75 > $(window).width() ? true : false;
      };
  
      var explodeIfColision = setInterval(function(){
                  
          $fireballPos = $fireball.offset();
          //console.log('fireballInterval:',$fireballPos.left);
  
          if (isFireballColision()) {
              $fireball.addClass('explode').removeClass('moving').css('marginLeft','+=22px'); 
              clearInterval(explodeIfColision);
              setTimeout(function() { $fireball.remove(); }, 500); 
          }
  
      }, 50);
  
      setTimeout(function() { $fireball.addClass('moving'); }, 20);
              
      setTimeout(function() { 
          $fireball.remove(); 
          clearInterval(explodeIfColision);
      }, 3020);
  
  }, (250));
};
var shoryuken = function(){
  $ken.addClass('shoryuken');
  setTimeout(function() { $ken.addClass('down'); }, 500); 
  setTimeout(function() { $ken.removeClass('shoryuken down'); }, 1000);
};
var jump = function(){
  $ken.addClass('jump');
  setTimeout(function() { $ken.addClass('down'); }, 500); 
  setTimeout(function() { $ken.removeClass('jump down'); }, 1000); 
};
var kneel = function(){
  $ken.addClass('kneel');
};
var walkLeft = function(){
  $ken.addClass('walk').css({ marginLeft:'-=10px' });
};
var walkRight = function(){
  $ken.addClass('walk').css({ marginLeft:'+=10px' });
};

// on click events
$('#a').click(punch);
$('#z').click(kick);
$('#e').click(rkick);
$('#q').click(tatsumaki);
$('#s').click(hadoken);
$('#d').click(shoryuken);
$('#up').click(jump);
$('#down').on('mousedown mouseup', function(e){
    if (e.type == 'mousedown') { kneel(); }
    else { $ken.removeClass('kneel'); }
});
$('#left').on('mousedown mouseup', function(e){
    if (e.type == 'mousedown') { walkLeft(); }
    else { $ken.removeClass('walk'); }
});
$('#right').on('mousedown mouseup', function(e){
    if (e.type == 'mousedown') { walkRight(); }
    else { $ken.removeClass('walk'); }
});

// on keydown events
$(document).on('keydown keyup', function(e) {
    if (e.type == 'keydown') { 
        
        // s - hadoken
        if (e.keyCode == 83 
            && !$ken.hasClass('tatsumaki') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('punch') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('reversekick')
        ) { 
            hadoken();
        }

        // d - shoryuken
        if (e.keyCode == 68 
            && !$ken.hasClass('tatsumaki')
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('punch') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('reversekick')
            && !$ken.hasClass('jump')
        ) { 
            shoryuken();
        }

        // q - tatsumaki senpuu kyaku
        if (e.keyCode == 81 
            && !$ken.hasClass('tatsumaki') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('punch') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('reversekick')
            && !$ken.hasClass('jump')
        ) { 
            tatsumaki();
        }

        // a - punch
        if (e.keyCode == 65 
            && !$ken.hasClass('punch') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('tatsumaki') 
        ) { 
            punch(); 
        }

        // e - kick
        if (e.keyCode == 90 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('tatsumaki')
        ) { 
            kick(); 
        }

        // r - reverse kick
        if (e.keyCode == 69 
            && !$ken.hasClass('reversekick') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('tatsumaki')
        ) { 
            rkick();
        }

        // up - jump
        if (e.keyCode == 38 
            && !$ken.hasClass('jump') 
            && !$ken.hasClass('reversekick') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('tatsumaki')
        ) { 
            jump();
        }

        // down - kneel
        if (e.keyCode == 40 
            && !$ken.hasClass('kneel') 
            && !$ken.hasClass('jump') 
            && !$ken.hasClass('reversekick') 
            && !$ken.hasClass('kick') 
            && !$ken.hasClass('hadoken') 
            && !$ken.hasClass('shoryuken') 
            && !$ken.hasClass('tatsumaki')
        ) { 
            kneel();
        }
    
    
        // ← flip 
        //if (e.keyCode == 37) $ken.addClass('flip');
        // → unflip 
        //if (e.keyCode == 39) $ken.removeClass('flip');
        // ←← →→ walking
        if (e.keyCode == 37) { walkLeft(); }
        if (e.keyCode == 39) { walkRight(); }
    }
    else { // keyup
        $ken.removeClass('walk kneel');
    }
    return false;
    //console.log(e.keyCode);
});

</script>
</body>
</html>